<template>
	<div v-if="data.singleImg.using && !data.singleImg.src">
		<dont-choose-media/>
	</div>
	<div v-else-if="data.carousel.using && !data.carousel.src[0]">
		<dont-choose-media/>
	</div>
	<div v-else-if="data.video.using && !data.video.src">
		<dont-choose-media/>
	</div>
	<div v-else class="wraper">
		<div class="head">
			<div class="title">
				<span class="title-content">赞助内容</span>
				<span class="title-icon el-icon-arrow-down"></span>
			</div>
			<div class="user">
        			<span class="user-img">
        				<img :src="data.userInfo.headImg">
        			</span>
				<span class="user-name">{{data.userInfo.name}}</span>
				<span class="user-icon"></span>
			</div>
		</div>
		<div class="body">
			<!--单图片-->
			<div v-if="data.singleImg.using" class="single">
				<div class="single-img">
					<img :src="data.singleImg.src">
				</div>
				<div class="single-text">
					<span class="ad-title">{{adverTitle || '标题'}}</span>
					<span class="ad-info">{{data.adText ||'动态消息链接描述'}}</span>
					<span class="detail">{{actionCall == '无按钮'?'打开连接':actionCall}}<i>&nbsp;&gt;</i></span>
				</div>
			</div>

			<!--轮播-->
			<div v-else-if="data.carousel.using" class="carousel">

				<div>
					<span class="carousel-info">{{data.adText ||'动态消息链接描述'}}</span>
				</div>

				<el-carousel
					@change="imgChange"
					:interval="2000"
					indicator-position="outside" :autoplay="true" arrow="never"
				>
					<el-carousel-item v-for="(item,i) in data.carousel.src" :key="i" class="carousel-item">
						<img :src="item">
						<span class="ad-title">{{adverTitle || '标题'}}</span>
						<span class="detail">{{actionCall == '无按钮'?'打开连接':actionCall}}<i>&nbsp;&gt;</i></span>
					</el-carousel-item>
				</el-carousel>
			</div>

			<!--视频-->
			<div v-else-if="data.video.using" class="video">
				<video :src="data.video.src" id="previewVideo"></video>
				<span v-show="!play" @click="playVideo" class="iconfont icon-play"></span>
				<span  v-show="play" @click="pauseVideo" :class="[{show: play},'icon-pause','iconfont']"></span>
				<div class="single-text">
					<span class="ad-title">{{adverTitle || '标题'}}</span>
					<span class="ad-info">{{data.adText ||'动态消息链接描述'}}</span>
					<span class="detail">{{actionCall == '无按钮'?'打开连接':actionCall}}<i>&nbsp;&gt;</i></span>
				</div>
			</div>

		</div>
		<div class="footer" :class="data.carousel.using?'footer-hidden':''">
			<span class="f-1"></span>
			<span class="f-2"></span>
			<span class="f-3"></span>
		</div>
	</div>
</template>

<script>
    import Vue from 'vue'
    import { Carousel,CarouselItem } from 'element-ui'
    import { mapGetters, mapMutations ,mapActions} from 'vuex'
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    Vue.use(Carousel)
    Vue.use(CarouselItem)

    export default {
        components: {
            DontChooseMedia
        },
        props: {
            'data': {
                default: {}
            }
        },

        data (){
            return {
                imgIndex:0,
                play:false,
            }
        },
        computed: {
            ...mapGetters([
                'adCreate'
            ]),
            actionCall:function(){
                let text = "";
                if(this.data.singleImg.using){
                    text = this.data.singleImg.actionCall;
                }else if(this.data.carousel.using){
                	text = this.data.carousel.imageInfo[0].actionCall;
                    //text = this.data.carousel.imageInfo[this.imgIndex].actionCall;
                }else if(this.data.video.using){
                    text = this.data.video.actionCall;
                }
                return text || "详细了解";
            },
            adverTitle: function () {
                if(this.data.singleImg.using){
                    this.title = this.data.singleImg.title;
                }else if(this.data.carousel.using){
                	this.title = this.data.carousel.imageInfo[0].title;
                    //this.title = this.data.carousel.imageInfo[this.imgIndex].title;
                }else if(this.data.video.using){
                    this.title = this.data.video.title;
                }
                return this.title || "";
            }
        },
        methods: {
            imgChange(index){
                this.imgIndex = index
            },
            playVideo(){
                let _this = this;
                let video = document.getElementById('previewVideo');
                video.play();
                this.play = true;
                video.addEventListener('ended',function () {
                    _this.play = false
                })
            },
            pauseVideo(){
                document.getElementById('previewVideo').pause();
                this.play = false
            }
        },
        created () {
        }
    }
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}

	.wraper{
		overflow: hidden;
		position: relative;
		width: 320px;
		//height: 548px;
		margin: 20px auto;
		background-color: #fff;
		word-wrap: break-word;
		color: #191919;
		font-family: Helvetica, Arial, Lucida Grande, sans-serif;
		font-size: 13px;
		line-height: 1.358;
	}
	.head{
		.title{
			height: 26px;
			line-height: 26px;
			border-bottom:1px solid #CED0D4;
			color: #9599A0;
			span{
				display: inline-block;
				height: 26px;
				line-height: 26px;
			}
			.title-content{
				width: 290px;
				padding-left: 20px;
			}
			.title-icon{
				font-size: 10px;
			}
		}
	}
	.user{
		padding-left:10px;
		height: 38px;
		line-height: 38px;
		.user-img{
			width: 38px;
			display: inline-block;
			line-height: 22px;
			padding:8px 0 0 8px;
			float: left;
			img{
				width: 22px;
				height: 22px;
			}
		}
		.user-name{
			display: inline-block;
			height: 38px;
			line-height: 38px;
		}
		.user-icon{
			display: inline-block;
			float: right;
			width: 18px;
			height: 18px;
			margin-top: 10px;
			margin-right: 15px;
			background:url('~assets/img/read-text.png') -70px -18px no-repeat;
		}
	}

	.video{
		width: 320px;
		position: relative;
		video{
			width: 320px;
			height: 180px;
		}
		.icon-pause,.icon-play{
			position:absolute;
			font-size: 50px;
			top:65px;
			left: 135px;
			color:#fff;
		}
		.hidden{
			display: none;
		}
		.icon-pause{
			display: none;
		}
		&:hover .icon-pause.show{
			 display: inline-block;
		 }
	}

	.carousel{
		.carousel-info{
			height: 36px;
			line-height: 36px;
			padding-left:10px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.carousel-item{
			border:1px solid #CED0D4;
			background-color:#fff;
			img{
				width: 100%;
				height: 240px;
			}
			.ad-title{
				display: block;
				padding-left:15px;
				font-size: 16px;
				font-weight: bold;
				height: 26px;
				line-height: 26px;
			}
			.detail{
				display: block;
				color:#4080FF;
				text-align: center;
				height: 26px;
				line-height: 26px;
				cursor: pointer;
			}
		}
	}

	.single,.video{
		border-bottom:1px solid #CED0D4;
	}

	.single-img{
		position: relative;
		text-align: center;
		width: 100%;
		height: 180px;
		overflow: hidden;
		img{
			width: 100%;
			height: 180px;
			vertical-align: middle;
		}
	}

	.single-text{
		padding:15px 15px 0 15px;
		span{
			display: block;
		}
		.ad-title{
			color: #4b4f56;
			font: 12px "SFUIText-Semibold";
			line-height: 16px;
			margin-bottom: 4px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.ad-info{
			color: #4b4f56;
			font: 12px "SFUIText-Regular";
			height: 32px;
			line-height: 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
		}

		.detail{
			text-align: center;
			height: 35px;
			line-height: 35px;
			color: #4080FF;
			cursor: pointer;
		}
	}

	.footer-hidden{
		position:relative;
		top:-17px;
	}

	.footer{
		margin-top: 10px;
		background-color:#fff;
		span{
			display: inline-block;
			height: 15px;
			background-image: url('~assets/img/read-text.png');
		}
		.f-1{
			width: 60px;
			background-position:5px -38px;
		}
		.f-2{
			width: 100px;
			background-position:0 0;
		}
		.f-3{
			width: 60px;
			background-position:-10px -18px;
		}
	}

</style>